<style>
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 700px;}
  #wrap-map { height: 100% ;position: relative; width: 100%;}

</style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
       try{
          var map;
          var listMarker = new Array();
          function initialize() {
            var mapOptions = {
              center: new google.maps.LatLng(10.775596, 106.68677),
              zoom: 17
            };
            map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
                loadMarker();
          }
          google.maps.event.addDomListener(window, 'load', initialize);
          

            var timer = $.timer(function() {

               $.ajax({
                                    type: "POST",
                                    data: { group_id: <?php echo Yii::app()->session['group_id'] ?>},
                                    url: "<?php echo Yii::app()->baseUrl."/index.php/ajax/getLocation"?>",
                                        beforeSend: function( xhr ) {
                                            xhr.overrideMimeType( "text/plain; charset=utf-8" );
                                            }
                                    } )
                .done(function(data) {
                    try{
                        var json = jQuery.parseJSON( data );
                        var group;
                        //show group
                        if(json.data.length>0){
                            $('span.label.info-label.label-important').text(json.data.length);
                            group='<div class="accordion-inner"><ul class="signups">';
                            
                        }else{
                            $('span.label.info-label.label-important').hide();
                        }  
                        //create html for group
                        var path='<?php echo Yii::app()->baseUrl?>';
                        for(var i=0;i<json.data.length;i++){
                          var user='<li><div class="user pull-left"><img src="'+path+'/assets/img/avatar-8.png" alt="user" >'+
                          '</div><div class="info"><h6>'+json.data[i].name+'</h6><p class="designation">'+json.data[i].location+'</p></div></li>';
                          var newLatLng = new google.maps.LatLng(json.data[i].lat, json.data[i].lng);
                            if(listMarker!=null){
                                listMarker[i].setPosition(newLatLng);
                                //map.setCenter(newLatLng);
                            } 
                          group=group+user;  
                        }
                        if(json.data.length>0){                  
                            group=group+'</ul></div>'; 
                            $('#collapseSeven').html(group);
                        }else{
                            
                        }
                        
                    }catch(e){
                        alert(e);
                    }

                })
                .fail(function(error) {
                   // alert( error );
                })
                .always(function() {
                    //alert( "complete" );
                });
            });

    
            function loadMarker(){
                var jqxhr = $.ajax({
                                    type: "POST",
                                    data: { group_id: <?php echo Yii::app()->session['group_id'] ?>},
                                    url: "<?php echo Yii::app()->baseUrl."/index.php/ajax/getLocation"?>",
                                        beforeSend: function( xhr ) {
                                            xhr.overrideMimeType( "text/plain; charset=utf-8" );
                                            }
                                    } )
                .done(function(data) {
                        var json = jQuery.parseJSON( data );
                        var group;
                        //show group
                        if(json.data.length>0){
                            $('span.label.info-label.label-important').text(json.data.length);
                            group='<div class="accordion-inner"><ul class="signups">';
                            
                        }else{
                            $('span.label.info-label.label-important').hide();
                        }
                        //create html for group
                        var path='<?php echo Yii::app()->baseUrl?>';
                        
                        for(var i=0;i<json.data.length;i++){
                            var myLatLng = new google.maps.LatLng(json.data[i].lat, json.data[i].lng);
                            
                            var user='<li><div class="user pull-left"><img src="'+path+'/assets/img/avatar-8.png" alt="user" >'+
                            '</div><div class="info"><h6>'+json.data[i].name+'</h6><p class="designation">'+json.data[i].location+'</p></div></li>';
                            if(map!=null){
                                map.setCenter(myLatLng);
                                listMarker[i] = new google.maps.Marker({
                                    position: myLatLng,
                                    animation: google.maps.Animation.DRROP,
                                    map: map,
                                    title: json.data[i].name
                                    
                                });

                                 map.setCenter(myLatLng);                   
                            }
                            group=group+user;
                        }
                        
                        if(json.data.length>0){                  
                            group=group+'</ul></div>'; 
                            $('#collapseSeven').html(group);
                        }else{
                            
                        }
                        if(map!=null){
                              timer.set({ time : 15000, autostart : true });
                        }

                })
                .fail(function() {
                    //alert( "fail" );
                })
                .always(function() {
                    //alert( "complete" );
                });                
                
            }

            $("ul.signups li").click(function() {
                alert(this.id); // id of clicked li by directly accessing DOMElement property
                alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
                alert($(this).html()); // gets innerHTML of clicked li
                alert($(this).text()); // gets text contents of clicked li
            });
              
              
              
            }catch(e){
                alert(e);
            }
    </script>

    
    <div id="map-canvas"></div>
   





        
